<template>
  <div class="find">
    <el-form ref="findForm" :model="findForm" :rules="registerRules" label-position="left" label-width="0px" class="find-form">
      <el-row type="flex" align="middle">
        <el-col :span="12" :offset="6"><div class="title">找回密码</div></el-col>
      </el-row>
      <div class="find-content">
        <el-form-item prop="phone">
          <el-input v-model="findForm.phone" type="text" auto-complete="off" placeholder="请输入手机号">
            <span slot="prepend">+86</span>
          </el-input>
        </el-form-item>
        <el-form-item prop="code">
          <el-input v-model="findForm.code" auto-complete="new-password" placeholder="验证码" style="width: 100%" @keyup.enter.native="handleLogin">
            <svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon"/>
            <el-button slot="append" :disabled="disableCodeBtn" type="text" style="width:150px;" @click="getCode">{{ codeMes }}</el-button>
          </el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input v-model="findForm.password" type="password" auto-complete="new-password" placeholder="设置新密码">
            <svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon"/>
          </el-input>
        </el-form-item>
        <el-form-item prop="checkPass">
          <el-input v-model="findForm.checkPass" type="password" auto-complete="off" placeholder="请再次输入设置密码">
            <svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon"/>
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button :loading="loading" size="medium" style="width:100%;" @click.native.prevent="handleFind">
            <span v-if="!loading">确定</span>
          </el-button>
        </el-form-item>
      </div>
    </el-form>
  </div>
</template>
<script>
import { hex_md5 } from '@/utils/md5'
import { getPhoneCode, findPass } from '@/api/loginDefine'
export default {
  name: 'Find',
  data() {
    const checkPassAgain = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'))
      } else if (value !== this.findForm.password) {
        callback(new Error('两次输入密码不一致!'))
      } else {
        callback()
      }
    }
    return {
      findForm: {
        phone: '',
        password: '',
        checkPass: '',
        code: ''
      },
      registerRules: {
        phone: [{ required: true, trigger: 'blur', message: '手机号不能为空' }],
        code: [{ required: true, trigger: 'blur', message: '验证码不能为空' }],
        password: [{ required: true, trigger: 'blur', message: '新密码不能为空' }],
        checkPass: [
          { validator: checkPassAgain, trigger: 'blur' }
        ]
      },
      disableCodeBtn: false,
      codeMes: '发送验证码',
      loading: false
    }
  },
  methods: {
    getCode() {
      this.disableCodeBtn = true
      const [phone, type, isInDb, timestamp] = [this.findForm.phone, 1, 0, Math.round(new Date())]
      // console.log([phone, type, isInDb, timestamp])
      const reqParam = {
        phone: phone,
        signcode: hex_md5(phone + type + isInDb + timestamp),
        type: type,
        isindb: isInDb,
        timestamp: timestamp
      }
      const that = this
      let wait = 60

      // 倒计时
      function countDown() {
        if (wait === 0) {
          that.codeMes = '发送验证码'
          that.disableCodeBtn = false
        } else {
          wait--
          that.codeMes = '倒计时' + wait + 'S'
          setTimeout(function() {
            countDown()
          }, 1000)
        }
      }
      getPhoneCode(reqParam).then(res => {
        console.log(res)
        if (res.code === '100000000000') {
          countDown()
        } else {
          that.disableCodeBtn = false
          this.$notify({
            title: res.msg,
            type: 'error',
            duration: 2500
          })
        }
      })
    },
    handleFind() {
      this.$refs.findForm.validate(valid => {
        if (valid) {
          this.loading = true
          const [phone, password, code, timestamp] = [this.findForm.phone, this.findForm.password, this.findForm.code, Math.round(new Date())]
          console.log([phone, password, code, timestamp])
          const reqParam = {
            phone: phone,
            password: password,
            code: code,
            timestamp: timestamp,
            signcode: hex_md5(phone + password + code + timestamp)
          }
          findPass(reqParam).then(res => {
            let [type, message] = ['success', '']
            if (res.code === '100000000000') {
              type = 'success'
              message = '修改新密码成功！'
              this.$router.push({ path: '/login' })
            } else {
              type = 'error'
              message = res.msg
            }
            this.loading = false
            this.$notify({
              title: message,
              type: type,
              duration: 2500
            })
          }).catch((error) => {
            this.loading = false
            this.$notify({
              title: error,
              type: 'error',
              duration: 2500
            })
          })
        } else {
          console.log('error register!!')
          return false
        }
      })
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss">
.find {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    background-color: #f5f5f6;
  }

  .find-form {
    border-radius: 6px;
    background: #ffffff;
    width: 1000px;
    padding: 50px 25px 25px 25px;

      .title {
        text-align: center;
        color: #707070;
        font-size: 30px;
      }
     .find-content{
       width:50%;
       margin: 20px auto;
     }

    .el-input {
      height: 38px;
      .el-input-group__prepend{
        background-color: #ffffff;
      }
      input {
        height: 38px;
      }
    }
    .input-icon{
      height: 39px;width: 14px;margin-left: 2px;
    }
  }
</style>
